import React, { useState } from "react";

export default function UseStateDemo() {

  console.log("UseStateDemo被调用了");
  const [count, setCount] = useState(3);
  const [name, setName] = useState("张三疯");
  
  // const [music,setMusic] = useState({
  //     id:"01001",
  //     name:"好运来"
  // });

  //   状态的初始值可以使用回调函数
  const [music, setMusic] = useState(() => {
    // 逻辑
    let t = 100;
    t++;
    return {
      id: "01001",
      name: "好运来",
      count: t,
    };
  });

  function changeCount() {
    setCount(5); //把count的值改成5。
    // setCount(count+6);//把count的值改成：原来的值加上6。
  }

  function changeName() {
    setName("梅超风");
  }

  function changeMusicName() {
    setMusic({
      ...music,
      name: "好日子",
    });
  }
  return (
    <div>
      <h1>useState</h1>
      <p>count:{count}</p>
      <input type="button" value="修改count" onClick={changeCount} />
      <p>name:{name}</p>
      <input type="button" value="修改name" onClick={changeName} />
      <p>音乐编号：{music.id}</p>
      <p>歌名：{music.name}</p>
      <input type="button" value="修改歌名" onClick={changeMusicName} />
    </div>
  );
}
